<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <h1>用户/经纪人登录</h1>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="nickname">
        <el-input v-model.number="ruleForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button @click="goRegister">注册</el-button>
      </el-form-item>

      <el-dialog title="用户/经纪人注册" :close-on-click-modal="false" :visible.sync="visible">
        {{imgurl}}
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
          label-width="80px">
          <el-form-item label="用户/经纪人" prop="nickname">
            <el-radio v-model="dataForm.flag" label="0">用户</el-radio>
            <el-radio v-model="dataForm.flag" label="1">经纪人</el-radio>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="dataForm.nickname" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="dataForm.password" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="tel">
            <el-input v-model="dataForm.tel" placeholder=""></el-input>
            <el-button @click="getCode">发送验证码</el-button>
            <el-input v-model="dataForm.code" placeholder="请输入验证码"></el-input>
          </el-form-item>
          <el-form-item label="头像" prop="head">
            <el-upload class="upload-demo" action="http://localhost:8888/api/user/houseuser/upload"
              :file-list="fileList" list-type="picture" :on-success="onSuccess" :on-remove="handleRemove">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
      </el-dialog>
    </el-form>
  </div>

  <script>
    new Vue({
      el: '#app',
      data () {
        var checknickname = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('用户名不能为空'));
          }
        };
        var validatepassword = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.checkpassword !== '') {
              this.$refs.ruleForm.validateField('checkpassword');
            }
            callback();
          }
        };
        return {
          imgurl: '',
          fileList: [],
          baseUrl: 'http://localhost:8888/api',
          ruleForm: {
            password: '',
            nickname: ''
          },
          visible: false,
          dataForm: {
            nickname: '',
            password: '',
            head: '',
            tel: '',
            code: ''
          },
          rules: {
            password: [
              { validator: validatepassword, trigger: 'blur' }
            ],
            nickname: [
              { validator: checknickname, trigger: 'blur' }
            ]
          },
          dataRule: {
            nickname: [
              { required: true, message: '昵称不能为空', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '密码不能为空', trigger: 'blur' }
            ],
            head: [
              { required: true, message: '头像不能为空', trigger: 'blur' }
            ]
          }
        };
      },
      watch: {

      },
      created () {

      },
      //方法集合
      methods: {
        handleRemove (file, fileList) {
          console.log(file, fileList);
          let imgurl = ''
          for (const key in fileList) {
            imgurl = imgurl + "," + fileList[key].response.url
          }
          this.imgurl = imgurl;
        },
        getCode () {
          axios.get(`${this.baseUrl}/user/houseuser/getTelCode?tel=${this.dataForm.tel}`).then(({ data }) => {
            alert(data.msg)
          })
        },
        onSuccess (response, file, fileList) {
          console.log(response, file, fileList)
          //let imgurl = ''
          //for (const key in fileList) {
          //  imgurl = imgurl + "," + fileList[key].response.url
          //}
          //this.imgurl = imgurl;
          this.dataForm.head = response.url
        },
        // 表单提交
        dataFormSubmit () {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              axios({
                url: `${this.baseUrl}/user/houseuser/register`,
                method: 'post',
                data: {
                  'username': this.dataForm.nickname,
                  'password': this.dataForm.password,
                  'userImg': this.dataForm.head,
                  'tel': this.dataForm.tel,
                  'flag': this.dataForm.flag,
                  'code': this.dataForm.code
                }
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '注册成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.visible = false
                      this.$emit('refreshDataList')
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
            }
          })
        },
        goRegister () {
          this.visible = true
        },
        submitForm () {
          axios.get(`${this.baseUrl}/user/houseuser/login?username=${this.ruleForm.nickname}&password=${this.ruleForm.password}`).then(({ data }) => {
            alert(data.msg)
            if (data.code == 0) {
              localStorage.setItem("token", data.token)
              location = "http://localhost:7001/newHouseList"
            }
          })
        }
      },
    })
  </script>
</body>

</html>